<template>
<div >
    <div class="iv-lottery">
        <ul>
            <li class="row">
                <div :class="['col-4 a-c' , {active : activeClass[index],'chou-col':ischouclick}]" v-for="(prize,index) in lis1" :key="index">
                    <div >
                        <img :src="prize.prizePicture" v-if="prize">
                        <p>{{prize.prizeName}}</p>
                    </div>
                </div>
            </li>
            <li class="row">
                <div :class="['col-4 a-c' , {active : activeClass[7],'chou-col':ischouclick}]">
                    <div v-if="prizesList[0]">
                        <img :src="prizesList[0].prizePicture" >
                        <p>{{prizesList[0].prizeName}}</p>
                    </div>
                </div>
                <div class="col-4" @click="startLottery" style="background:none;" :class="{'chou-col':ischouclick}">
                    <img  v-lazy.container="chou_btn" class="chou-btn" v-if="lotteryBtn">
                </div>
                <div :class="['col-4 a-c' , {active : activeClass[3],'chou-col':ischouclick}]">
                    <div v-if="prizesList[4]">
                        <img :src="prizesList[4].prizePicture" >
                        <p>{{prizesList[4].prizeName}}</p>
                    </div>
                </div>
            </li>
            <li class="row">
                <div :class="['col-4 a-c' , {active : activeClass[6-index],'chou-col':ischouclick}]" v-for="(prize,index) in lis2" :key="index">
                    <div v-if="prize">
                        <img :src="prize.prizePicture" >
                        <p>{{prize.prizeName}}</p>
                    </div>
                </div>
            </li>
        </ul>
    </div>

</div>
</template>



<script type="text/javascript">
    
    export default {
        name: 'swiper',
        data() {
            return {
                activeClass: [false, false, false, false, false, false, false, false],
                index: -1,
                count: 8,
                timer: null,
                times: 0,
                speedData: 100,
                lock: false,
                afterLotteryHandler: null,
                chou_btn:"https://youlingqinius.wonderlandnet.cn/9-chou.png",
            };
        },
        props: {

            prizesList: {
                type: Array,
                default() {
                    return [];
                }
            },
            lotteryBtn: {
                type: Object,
                default() {
                    return {
                        img: ''
                    };
                }
            },

            beforeLottery: {
                type: Function,
                default() { throw new Error('you must define beforeLottery before draw a lottery '); }
            },

            afterLottery: {
                type: Function,
                // eslint-disable-next-line
                default() { console.warn('you can use afterLottery after rolling'); }
            },

            prize: {
                type: Number,
                default: 0
            },
            speed: {
                type: Number,
                default: 100
            },
            cycle: {
                type: Number,
                default: 20
            },
            ischouclick:{
                type:Boolean,
                default:false
            }
        },
        computed: {
            lis1() {
                return this.prizesList.slice(1, 4);
            },
            lis2() {
                return this.prizesList.slice(5, 8).reverse();
            }
        },
        created() {
            this.speedData = this.speed;
            this.afterLotteryHandler = this.afterLottery;
        },
        beforeDestroy() {
            this.afterLotteryHandler = () => { };
        },
        methods: {
            startLottery() {
                if (!this.lock) {
                    let promise = () => {
                        return new Promise((resolve, reject) => {
                            this.lock = true;
                            this.beforeLottery(resolve, reject);
                        });
                    };

                    let start = async () => {
                        try {
                            await promise();

                            this.roll();
                        } catch (e) {
                            e();
                        }

                    };

                    start();
                }

            },
            _rollHandler() {
                var index = this.index;
                var count = this.count;

                for (let i = 0, len = this.activeClass.length; i < len; i++) {
                    this.activeClass[i] = false;
                }
                index += 1;
                if (index > count - 1) {
                    index = 0;
                }
                this.activeClass[index] = true;
                this.index = index;
                return false;
            },
            roll() {
                // eslint-disable-next-line
                this.activeClass = this.activeClass.map(item => item = false);
                this.times += 1;
                this._rollHandler();
                if (this.times > this.cycle + 10 && this.prize == this.index) {

                    clearTimeout(this.timer);

                    setTimeout(
                        () => { this._showResult(); }
                        , 1000);

                    this.lock = false;
                    this.index = -1;
                    this.count = 8;
                    this.timer = null;
                    this.speedData = this.speed;
                    this.times = 2;

                } else {
                    if (this.times < this.cycle) {
                        this.speedData -= 2;
                    } else {
                        if (this.times > this.cycle + 10 && ((this.prize == 0 && this.index == 7) || this.prize == this.index + 1)) {
                            this.speedData += 110;
                        } else {
                            this.speedData += 20;
                        }
                    }
                    if (this.speedData < 40) {
                        this.speedData = 40;
                    }
                    this.timer = setTimeout(
                        () => { this.roll(); }
                        , this.speedData);
                }
                return false;
            },
            _showResult() {
                this.afterLotteryHandler();
            }
        }
    };
</script>
<style lang="less" scoped>
.iv-lottery {
  width: 100%;
  background-size: cover;
    position: absolute;
    bottom: 0.45rem;
  ul {
    box-sizing: border-box;
    background-size: contain;
    background-repeat: no-repeat;
    margin:0 0.45rem 0.02rem 0.45rem;
    position: relative;
    z-index: 1; 
    border-radius: 5px;
    background: rgba(63, 24, 10, 0.3);
    li {
      overflow:hidden;
      position: relative;
        
    }

    .col-4{
        width: 1.8rem;
        height: 1.46rem;
        float: left;
        box-sizing: border-box;
        margin: 0.035rem;
        background:url("../../assets/9-write.png") no-repeat center top;
        background-size: 100% 100%;
        border-radius: 8px;
        .chou-btn{
            width: 100%;
            height: 100%;
        }
    }
    li div {
      position: relative;
        width: 100%;
        text-align: center;
      &.active:before {
        background: none;
        }
      }

    li div img{
      width: 1rem;
      height: 0.84rem;
     }
    li div p{
        font-size: 0.22rem;
        color: #543c25;
        overflow: hidden;/*超出部分隐藏*/
        white-space: nowrap;/*不换行*/
        text-overflow:ellipsis;
     }

   .chou-col:before{
        content: "";
        display: block;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        border-radius: 5px;
        z-index: 104;
        background: rgba(63, 24, 10, 0.3);
    }
  }

}
</style>
